<ion-content>
	<ion-grid class="l-top">
		<ion-row>
			<ion-col text-right class="l-help">
				<ion-icon name="help-circle"></ion-icon> 什么是等级
			</ion-col>
		</ion-row>
		<ion-row>
			<div class="level-circle" id="level">Lv.{{levelInfo?.level}}</div>
		</ion-row>
		<ion-row>
			<ion-col text-center>当前等级</ion-col>
		</ion-row>
		<ion-row class="exp-count" margin-vertical>
			<ion-col width-50 text-center>
				<h4>{{levelInfo?.exp}}</h4>
				<span color="darkgrey" class="small-font">当前经验值</span>
			</ion-col>
			<ion-col width-50 text-center>
				<h4>{{nextExp}}</h4>
				<span color="darkgrey" class="small-font">下一级所需经验</span>
			</ion-col>
		</ion-row>
	</ion-grid>
	<div padding text-center><span color="darkgrey">您当前享受以下专属权益</span></div>
	<ion-grid class="l-benefit">
		<ion-row>
			<ion-col width-33 text-center class="l-b-item active">
				<div class="l-icon">
					<ion-icon name="analytics"></ion-icon>
				</div>
				<p>权益一</p>
			</ion-col>
			<ion-col width-33 text-center class="l-b-item active">
				<div class="l-icon">
					<ion-icon name="beer"></ion-icon>
				</div>
				<p>权益二</p>
			</ion-col>
			<ion-col width-33 text-center class="l-b-item active">
				<div class="l-icon">
					<ion-icon name="bonfire"></ion-icon>
				</div>
				<p>权益三</p>
			</ion-col>
			<ion-col width-33 text-center class="l-b-item active">
				<div class="l-icon">
					<ion-icon name="bowtie"></ion-icon>
				</div>
				<p>权益四</p>
			</ion-col>
			<ion-col width-33 text-center class="l-b-item">
				<div class="l-icon">
					<ion-icon name="logo-freebsd-devil"></ion-icon>
				</div>
				<p>权益五</p>
			</ion-col>
			<ion-col width-33 text-center class="l-b-item">
				<div class="l-icon">
					<ion-icon name="ice-cream"></ion-icon>
				</div>
				<p>权益六</p>
			</ion-col>
		</ion-row>
	</ion-grid>
</ion-content>